<script setup lang="ts">
import { OScroller } from '@opensig/opendesign';
import { computed, onMounted } from 'vue';
import { useData } from 'vitepress';
import LayoutHeader from '@/layouts/LayoutHeader.vue';
import LayoutDoc from '@/layouts/LayoutDoc.vue';
import LayoutPage from '@/layouts/LayoutPage.vue';
import LoginDialog from '@/components/dialog/LoginDialog.vue';
import AppEmpty from '@/components/AppEmpty.vue';
import noData from '@/assets/category/common/404.png';
import LayoutHeaderMobile from '@/layouts/LayoutHeaderMobile.vue';
import HeaderMobileNavContent from '@/components/headerMobile/HeaderMobileNavContent.vue';
import { getGroupInfosApi } from '@/api/api-meeting.ts';
import { useMeetingStore } from '@/stores/meeting';
import CookieNotice from '@/components/CookieNotice.vue';
import { useScreen } from '@/composables/useScreen.ts';

// -------------------- 判断布局类型 --------------------
const { frontmatter, page } = useData();
const isPage = computed(() => frontmatter.value.layout === 'page');
const isNotFound = computed(() => page.value.isNotFound);

const meetingStore = useMeetingStore();
onMounted(() => {
  getGroupInfosApi()
    .then((res) => {
      meetingStore.$patch({
        hasPerm: res.length > 0,
      });
    })
    .catch(() => {
      meetingStore.$patch({
        hasPerm: false,
      });
    });
})

const { lePadV } = useScreen();
</script>

<template>
  <LayoutHeaderMobile v-if="lePadV"></LayoutHeaderMobile>
  <LayoutHeader v-else></LayoutHeader>
  <OScroller show-type="hover" disabled-x autoUpdateOnScrollSize >
    <main class="layout-404" v-if="isNotFound">
      <AppEmpty :src="noData"></AppEmpty>
    </main>
    <main class="layout-main" v-else>
      <LayoutPage v-if="isPage"></LayoutPage>
      <LayoutDoc v-else />
    </main>
  </OScroller>
  <ClientOnly>
    <LoginDialog></LoginDialog>
    <HeaderMobileNavContent />
    <CookieNotice />
  </ClientOnly>
</template>

<style lang="scss">
:root {
  --layout-header-height: 72px;
  --layout-header-z-index: 101;

  --layout-doc-header-height: 48px;

  --layout-footer-height: 0;
  // 面包屑上下间距
  --layout-doc-padding-top: 32px;

  --layout-content-min-height: calc(100vh - var(--layout-header-height) - var(--layout-footer-height));

  --vw100: 100vw;
  // 锚点宽度
  --layout-doc-anchor-width: 296px;
  --anchor-item-width: calc(var(--layout-doc-anchor-width) - 36px);
  // 菜单宽度
  --layout-doc-menu-width: 256px;
  // 锚点距顶部距离
  --layout-doc-anchor-top: calc(var(--layout-header-height) + var(--layout-doc-padding-top) * 2 + 18px);

  // 菜单文档间距
  --layout-doc-menu-gap: 44px;
  // 文档左间距
  --layout-doc-offset-left: calc(var(--layout-doc-menu-width) + var(--grid--layout-padding) + var(--layout-doc-menu-gap));
  @media screen and (min-width: 1440px) {
    --layout-doc-width: calc(var(--vw100) - var(--layout-doc-menu-width) - var(--layout-doc-anchor-width) - var(--layout-doc-menu-gap) - var(--grid--layout-padding) * 2);
  }
  @include respond-to('pc') {
    --layout-header-height: 72px;
  }
  @include respond-to('laptop') {
    --layout-doc-padding-top: 24px;
    --layout-header-height: 64px;
  }

  @include respond-to('pad_h') {
    --layout-doc-menu-width: 304px;
    --layout-doc-anchor-width: 196px;
    --layout-doc-padding-top: 16px;
    --layout-header-height: 56px;
  }
  @include respond-to('pad_v') {
    --layout-doc-menu-width: 264px;
    --layout-doc-anchor-width: 196px;
    --layout-header-height: 48px;
    --layout-doc-padding-top: 16px;
  }

  @include respond-to('phone') {
    --layout-header-height: 48px;
    --layout-doc-padding-top: 16px;
  }

}

</style>
<style scoped lang="scss">
.layout-main {
  padding-top: var(--layout-header-height);
  width: var(--grid-full-width);
  margin: 0 auto;
  @include respond-to('phone') {
    padding-top: calc(var(--layout-header-height) * 2);
  }
}

.o-scroller {
  height: 100vh;
  background-color: var(--o-color-ubmc-bg);
  --scrollbar-height: calc(100vh - var(--layout-header-height) * 2 - 10px);

  :deep(.o-scroller-container) {
    scroll-padding-top: var(--layout-header-height);
  }
}

.layout-404 {
  padding-top: var(--layout-header-height);
  height: calc(var(--layout-content-min-height) + 24px);

  .empty-wrap {
    padding-top: 256px;
  }
}
</style>
